<template>
	<view class="zg-area">
		<view class="area-3">
			<image src="/pagesShop/static/ob.png" mode=""></image>
			<view class="area3-content" v-if="status !== -1">
				<view class="area3-content-left" v-if="status === 0">
					<view class="a3l-title">待付款</view>
					<view class="a3l-info">等待买家付款</view>
				</view>
				<view class="area3-content-left" v-if="status === 1">
					<view class="a3l-title">待发货</view>
					<view class="a3l-info">等待卖家发货</view>
				</view>
				<view class="area3-content-left" v-if="status === 2">
					<view class="a3l-title">待收货</view>
					<view class="a3l-info">等待买家发货</view>
				</view>
				<view class="area3-content-left" v-if="status === 3">
					<view class="a3l-title">待评价</view>
					<view class="a3l-info">等待买家评价</view>
				</view>
				<view class="area3-content-left" v-if="status === 4">
					<view class="a3l-title">已完成</view>
				</view>
				<view class="area3-content-left" v-if="status === 5">
					<view class="a3l-title">无效订单</view>
				</view>
				<view class="area3-content-right">
					<image src="/pagesShop/static/bag1.png" mode="widthFix" v-if="status === 0"></image>
					<image src="/pagesShop/static/bag2.png" mode="widthFix" v-if="status === 1"></image>
					<image src="/pagesShop/static/bag4.png" mode="widthFix" v-if="status === 2"></image>
					<image src="/pagesShop/static/bag3.png" mode="widthFix" v-if="status === 3"></image>
					<image src="/pagesShop/static/bag6.png" mode="widthFix" v-if="status === 4"></image>
					<image src="/pagesShop/static/bag5.png" mode="widthFix" v-if="status === 5"></image>
				</view>
			</view>
		</view>
		<view class="area-1">
			<view class="area-1-left">
				<image src="/pagesShop/static/location.png" mode="widthFix"></image>
				<view class="area-1-left-info">
					<view class="tp-fc333 tp-fz28">
						<text>{{details.receiverName || ''}}</text>
						<text>{{details.receiverPhone || ''}}</text>
					</view>
					<view class="tp-fc666 tp-fz26">
						<text>{{details.receiverProvince || ''}}{{details.receiverCity || ''}}{{details.receiverArea || ''}}</text>
					</view>
					<view class="tp-fc666 tp-fz26">
						<text>{{details.receiverAddress || ''}}</text>
					</view>
				</view>
			</view>
			<!-- <view class="area-1-right">
				<image src="/pagesShop/static/right.png" mode="widthFix"></image>
			</view> -->
		</view>
		<view class="area-2">
			<view class="area-2-card" v-for="(item,index) in details.mallShopOrderVos" :key="index">
				<view class="a2c-title tp-fz28 tp-fc333">
					<image class="tp-img32" src="../static/shop.png" mode="widthFix"></image>
					<text>{{item.scName || '店铺名称'}}</text>
				</view>
				<view class="a2c-content" v-for="(item1,index1) in item.mallOrderItems" :key="index1">
					<view class="a2c-img">
						<image class="tp-br8" :src="`${shopImgUrl}${item1.productPic}`" mode="aspectFill"></image>
					</view>
					<view class="a2c-info">
						<view class="a2c-info-title tp-fz26 tp-fc333">
							{{item1.productName || '商品名称'}}
						</view>
						<view class="a2c-info1">
							<text v-for="(item2,index2) in handleArr1(item1.productAttr)" :key="index2">{{item2.specification}}:{{item2.value + ' '}} </text>
						</view>
						<view class="a2c-info2">
							<view class="flex align_baseline tp-fz24 tp-red">
								<text>￥ <text class="tp-fz36">{{parseInt(item1.productPrice) || 0}}</text></text>
							</view>
							<view class="a2c-info-num">
								<text>x{{parseInt(item1.productQuantity) || 0}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="area-2-row">
				<view class="a2r-left">
					优惠券
				</view>
				<view class="a2r-right">
					<text>-￥{{details.reduceAmount || 0}}</text>
				</view>
			</view> -->
			<view class="area-2-row">
				<view class="a2r-left">
					运费
				</view>
				<view class="a2r-right">
					<text>{{details.freightAmount || 0}}元</text>
				</view>
			</view>
			<view class="area-2-row">
				<view class="a2r-left">
					合计
				</view>
				<view class="a2r-right">
					<text class="a2r-price tp-fz28">￥{{details.payAmount || 0}}</text>
				</view>
			</view>
		</view>
		<view class="area-4">
			<view class="tj">
				<view class="tj-title">
					<view class="tt-left">
						<text>订单信息</text>
					</view>
					<view class="tt-right">
					</view>
				</view>
			</view>
			<view class="a4-content">
				<view>订单号：{{ details.orderSn  || '' }}</view>
				<view>下单时间：{{details.submitTime || '' }}</view>
				<view v-if="details.payTime">支付时间：{{details.payTime || '' }}</view>
				<view v-if="status > 0">支付方式：{{details.payType == '0' ? '余额' : details.payType == '1' ? '微信' :details.payType == '2' ? '支付宝' : details.payType == '3' ? '未支付' : ''}}</view>
			<!-- 	<view v-if="details.payTime">发货时间：{{details.payTime || '' }}</view>
				<view v-if="details.payTime">收货时间：{{details.payTime || '' }}</view> -->
			</view>
		</view>

		<!-- 客服 S -->
		<view class="kefu-fixed" @click="handleKeFu">
			<image src="../static/kefu2.png" mode=""></image>
		</view>
		<!-- 客服 E -->

		<view class="tp-h98"> </view>

		<!-- 工具栏-下   -->
		<view class="tp-btn-h100 tp-bgf tp-h98 level_align flex_end" v-if="[0,2,3,4,5].includes(status - 0)">
			<view class="tp-ptb0lr20 tp-bcF5  tp-br8 tp-h56 center_combo tp-fc666 tp-mr30" @click="action1" v-if="[0].includes(status - 0)">
				取消订单
			</view>
			<view class="tp-ptb0lr20 tp-bcF5  tp-br8 tp-h56 center_combo tp-fc666 tp-mr30" @click="action2" v-if="[4,5].includes(status - 0)">
				删除订单
			</view>
			<view class="tp-ptb0lr20 tp-bc tp-br8 tp-h56 center_combo tp-fcF tp-mr30 tp-mr30" @click="handePay" v-if="[0].includes(status - 0)">
				立即支付
			</view>
			<view class="tp-ptb0lr20 tp-bc tp-br8 tp-h56 center_combo tp-fcF tp-mr30" @click="confirmReceive" v-if="[2].includes(status - 0)">
				确认收货
			</view>
			<view class="tp-ptb0lr20 tp-bc tp-br8 tp-h56 center_combo tp-fcF tp-mr30" @click="goRouter2" v-if="[3].includes(status - 0)">
				立即评价
			</view>
			<view class="tp-ptb0lr20 tp-bgf tp-border1 tp-br8 tp-h56 center_combo tp-fc tp-mr30" @click="goRouter3" style="border-color: #00B4FF;"
			 v-if="[4].includes(status - 0)">
				查看评价
			</view>
		</view>
		<!-- 支付 -->
		<CommonPaySecond ref="commonPay" :price="details.payAmount" :orderInfo="orderInfo" @payMoney="payMoney"
		 @wechatPaySuccess="wechatPaySuccess"></CommonPaySecond>
		<!-- 客服服务电话弹框 S-->
		<CommonServicePhone ref="takePhone" type="11"></CommonServicePhone>
		<!-- 客服服务电话痰喘 E-->
	</view>
</template>

<script>
	import CommonPaySecond from '../common/common-pay-second.vue'
	import CommonServicePhone from '@/components/common/common-servicePhone.vue'
	export default {
		components: {
			CommonPaySecond,
			CommonServicePhone
		},
		data() {
			return {
				cid: '',
				orderId: '',
				orderNo: '',
				status: null, // 订单状态
				details: {}
			}
		},
		onLoad(opt) {
			console.log(opt);
			this.orderId = opt.id
			this.getDetails1()
		},
		onPullDownRefresh() {
			this.getDetails1()
		},
		computed: {
			// 订单信息
			orderInfo() {
				let o = {
					orderNo: this.orderNo,
					payType:1,
					sourceType:0,
					payPassword:'123456'
				}
				return o
			},
		},
		methods: {
			// 确认收货
			confirmReceive(){
				this.$http.post(this.$api.confirmReceipt + '?id=' + this.orderId).then(res => {
					if(res.code == 200){
						this.getDetails1()
						uni.showToast({
							title: '确认成功',
							icon: 'none'
						})
					}
				})
			},
			// 余额支付成功
			payMoney(pwd) {
				// #ifdef MP-WEIXIN
				let url = this.$api.shop_order_7 + '?orderNo=' + this.orderNo + '&payType=0&sourceType=0&payPassword=' + pwd
				// #endif
				// #ifdef H5
				let url = this.$api.shop_order_7 + '?orderNo=' + this.orderNo + '&payType=3&sourceType=2&payPassword=' + pwd
				// #endif
				this.$http.post(url).then(res => {
					if (res.code === 200) { // 密码正确，支付成功
						this.$refs.commonPay.closeKeyBoard()
						uni.showToast({
							title:'支付成功'
						})
						this.getDetails1()
						uni.showToast({
							title: '支付成功'
						})
					} else {
						uni.showToast({
							title:'支付失败',
							icon: 'none'
						})
					}
				})
			},
			// 微信支付成功
			wechatPaySuccess() {
				this.$refs.commonPay.close()
				uni.showToast({
					title: '支付成功'
				})
			},
			// 支付订单
			handePay() {
				this.$refs.commonPay.show()
			},
			// 根据订单id查询积分商品详情
			getDetails1() {
				this.$http.post(this.$api.shop_order_5, {}, {
					params: {
						id: this.orderId, // 订单号
					}
				}).then(result => {
					uni.stopPullDownRefresh()
					if (result.code === 200) {
						this.details = result.data
						this.orderNo = result.data.orderSn
						this.status = isNaN(parseInt(result.data.status)) ? -1 : parseInt(result.data.status)
					} else {
						this.details = {}
					}
				})
			},
			// 取消订单
			action1() {
				this.$http.post(this.$api.shop_order_3 + 'id=' + this.orderId).then(result => {
					if (result.code === 200) {
						uni.showToast({
							title: '取消成功',
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 600)
					}
				})
			},
			// 删除订单
			action2() {
				this.$http.post(this.$api.shop_order_10 + '?id=' + this.orderId).then(result => {
					if (result.code === 200) {
						uni.showToast({
							title: '删除成功',
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 600)
					}
				})
			},
			openP1() {
				this.$refs.p1.open()
			},
			closeP1() {
				this.$refs.p1.close()
			},
			// 联系客服
			handleKeFu() {
				this.$refs.takePhone.show()
			},
			// 去评价
			goRouter2() {
				let info = this.details.mallShopOrderVos.length && this.details.mallShopOrderVos[0].mallOrderItems && this.details.mallShopOrderVos[0].mallOrderItems.length && this.details.mallShopOrderVos[0].mallOrderItems[0]
				console.log(info);
				uni.navigateTo({
					url: '../details/evaluate?pageName=积分&orderNo='+ this.orderNo + '&shopInfo=' + JSON.stringify(info)
				})
			},
			// 查看评价
			goRouter3() {
				uni.navigateTo({
					url: './evaluate?pageName=积分&pageType=1&orderNo=' + this.details.orderSn
				});
			},
			handleArr1(str) {
				if(typeof str === 'string' && str !== '') {
					let arr = []
					try {
						arr = JSON.parse(str)
					} catch(e){
						//TODO handle the exception
					}
					return arr
				} else {
					return []
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.area-3 {
		height: 180rpx;
		box-sizing: border-box;
		background-color: #fff;
		position: relative;
	}

	.area3-content {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #fff;
		padding: 0 60rpx;
	}

	.a3l-title {
		font-size: 32rpx;
		margin-bottom: 16rpx;
	}

	.a3l-info {
		font-size: 26rpx;
	}

	.area3-content-right {
		image {
			width: 100rpx;
			height: auto;
		}
	}

	.pay-content {
		background-color: #fff;
		border-radius: 10rpx;
		width: 660rpx;
	}

	.pay-title {
		padding: 20rpx;
		border-bottom: 1px solid #ddd;
		display: flex;
		justify-content: space-between;
		align-items: center;

		view {
			flex-shrink: 0;
			width: 40rpx;
		}

		image {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.pay-row1 {
		text-align: center;
		color: $uni-color-error;
		font-size: 50rpx;
		padding: 50rpx;
	}

	.pay-row2 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 0;
		margin: 0 30rpx;
		border-bottom: 1px solid #eee;
	}

	.pr2-left {
		display: flex;
		align-items: center;

		image {
			width: 40rpx;
			height: 40rpx;
			margin-right: 20rpx;
		}
	}

	.pr2-right {
		display: flex;
		align-items: center;

		image {
			width: 30rpx;
			height: 30rpx;
			margin-left: 20rpx;
		}
	}

	.pay-row3 {
		padding: 60rpx 30rpx;

		button {
			background-color: $blue;
			color: #fff;
			border-radius: 10rpx;
			height: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 32rpx;
		}
	}

	.area-1 {
		background-color: #fff;
		margin: 20rpx 30rpx;
		border-radius: 12rpx;
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.area-1-left {
		display: flex;
		align-items: center;
		color: #666;

		image {
			width: 40rpx;
			height: auto;
			margin-right: 20rpx;
		}
	}

	.area-1-left-info {
		view {
			margin-bottom: 10rpx;
			color: #666;

			&:nth-of-type(1) {
				font-size: 26rpx;

				text {
					margin-right: 20rpx;
				}
			}

			&:nth-last-of-type(1) {
				margin-bottom: 0
			}
		}
	}

	.area-1-right {
		width: 50rpx;
		display: flex;
		justify-content: flex-end;

		image {
			width: 14rpx;
			height: auto;
		}
	}

	.area-2 {
		background-color: #fff;
		margin: 20rpx 30rpx;
		border-radius: 12rpx;
		padding: 30rpx;
	}

	.area-2-card {
		padding-bottom: 20rpx;
		border-bottom: 1px solid #eee;
	}

	.a2c-title {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;

		image {
			width: 30rpx;
			height: auto;
			margin-right: 20rpx;
		}
	}

	.a2c-content {
		display: flex;
	}

	.a2c-img {
		flex-shrink: 0;
		width: 140rpx;
		height: 140rpx;
		margin-right: 20rpx;

		image {
			width: 140rpx;
			height: 140rpx;
		}
	}

	.a2c-info {
		flex-grow: 1;
	}

	.a2c-info-title {
		font-size: 26rpx;
		margin-bottom: 10rpx;
	}

	.a2c-info1 {
		margin-bottom: 10rpx;
		color: #999;

		text {
			margin-right: 10rpx;
		}
	}

	.a2c-info2 {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}

	.a2c-info-price {
		color: $uni-color-error;
		font-weight: bold;
		font-size: 30rpx;
	}

	.area-2-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0 0;
	}

	.a2r-right {
		display: flex;
		align-items: center;

		image {
			width: 14rpx;
			height: auto;
			margin-left: 20rpx;
		}
	}

	.a2r-tip {
		color: #999;
	}

	.a2r-price {
		color: $uni-color-error;
	}

	.fixed-tool-bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100rpx;
		box-sizing: border-box;
		padding: 0 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
	}

	.ftb-l {
		display: flex;
		align-items: center;

		text {
			&:nth-of-type(1) {
				font-size: 26rpx;
			}
		}
	}

	.ftb-price {
		color: $uni-color-error;
		font-size: 36rpx;
		font-weight: bold;
	}

	.ftb-r {
		display: flex;
		justify-content: flex-end;
		align-items: center;

		button {
			background-color: transparent;
			color: #999;
			border: 1px solid #ddd;
			font-size: 26rpx;
			padding: 20rpx 30rpx;
			border-radius: 8rpx;

			&:not(:nth-of-type(1)) {
				margin-left: 20rpx;
			}

			&.active {
				background-color: $uni-color-warning;
				border: 0;
				color: #fff;
			}
		}
	}

	.tj {
		background-color: #fff;
		padding: 30rpx;
	}

	.tj-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.tt-left {
		display: flex;
		align-items: center;
		font-size: 30rpx;

		&::before {
			content: "";
			display: block;
			width: 6rpx;
			height: 30rpx;
			border-radius: 3rpx;
			background-color: #00B4FF;
			margin-right: 20rpx;
		}
	}

	.tt-right {
		display: flex;
		align-items: center;

		image {
			width: 10rpx;
			height: auto;
			margin-left: 20rpx;
		}

		text {
			font-size: 24rpx;
			color: #999;
		}
	}

	.area-4 {
		margin: 30rpx;
		border-radius: 12rpx;
	}

	.a4-content {
		background-color: #fff;
		color: #666;
		padding: 0 30rpx 30rpx;

		view {
			margin-bottom: 10rpx;

			&:nth-last-of-type(1) {
				margin-bottom: 0;
			}
		}
	}

	.kefu-fixed {
		position: fixed;
		right: 60rpx;
		bottom: 200rpx;
		width: 100rpx;
		height: 100rpx;
	}
</style>
